<template>
  <view class="personal-page">
    <view class="tools">
      <!-- <i class="icon iconfont icon-shezhi1"></i> -->
    </view>
    <!-- 头部用户信息 -->
    <view class="userInfo">
      <img :src="avatar" alt="" />
      <view class="user">
        <view class="user-name">{{ userInfo.loginName || '没有名字' }}</view>
        <view class="user-signature">
          坚持记账的第
          <span class="days">{{ 333 }}</span>
          天
        </view>
      </view>
    </view>
    <tb-button class="logout" @click="handleLogout">退出登录</tb-button>
    <!-- 底部tab栏 -->
    <tab-bar activeTab="personal"></tab-bar>
  </view>
</template>
<script lang="ts">
import Vue from 'vue'
import tabBar from '@/components/tabBar/index.vue'
import avatar from '@/static/image/tb.png'
import { mapState } from 'vuex'
export default Vue.extend({
  components: { tabBar },
  data() {
    return {
      avatar,
    }
  },
  computed: {
    ...mapState('user', ['userInfo']),
  },
  methods: {
    handleLogout() {
      this.$confirm('确定退出登录嘛？', '退出登录', {
        confirmText: '退出',
        cancelText: '取消',
        onConfirm: () => {
          this.$api.getLogioutApi().then((res: any) => {
            this.$store.commit('user/CLEAR_USER_STATE')
            uni.removeStorageSync('USERINFO')
            uni.removeStorageSync('TALLY_BOOK_ACCESS_TOKEN')
            uni.removeStorageSync('TALLY_BOOK_USER_ID')
            uni.navigateTo({ url: '/pages/personal/login' })
          })
        },
        onCancel: () => {
          console.log(89)
        },
      })
    },
  },
  created() {
    uni.hideTabBar()
  },
})
</script>
<style lang="less" scoped>
.personal-page {
  padding: 0 48rpx;
  .tools {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    height: 60rpx;
    i {
      font-size: 40rpx;
    }
  }
  .userInfo {
    height: 150rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    img {
      width: 150rpx;
      height: 150rpx;
      border-radius: 50%;
      margin-right: 30rpx;
    }
    .user {
      height: 120rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .user-name {
        font-size: 40rpx;
        color: #333;
      }
      .user-signature {
        font-size: 24rpx;
        color: #999;
        .days {
          color: #87cefa;
          font-size: 40rpx;
          margin: 0 10rpx;
        }
      }
    }
  }
  .logout {
    margin-top: 50rpx;
    border-radius: 20rpx;
    color: #87cefa;
    font-size: 36rpx;
    // background: 	#6495ED;
  }
}
</style>